@import "../varibles";
@import "../mixins/mixin";

.vue-loading{
	position:fixed;
	top:50%;
	left:50%;
	margin-top:-50px;
	margin-left:-50px;
	width:100px;
	height:100px;
	border-radius:$loading_border_radius;
	text-align:center;
	background-color: $loading_bg_col;
	color:$loading_text_col;
}

.vue-loading-header{
	
}

.vue-loading-icon{
    display: block;
	position:relative;
    width: 40px;
    height: 40px;
	margin:10px auto;
    border-radius: 40px;
    box-shadow:0 0 10px  #000;
    background:linear-gradient(to bottom, #000000 0%,#ffffff 100%);
    animation: MessageLoading 3s linear 0s infinite;
	
	&:after{
		content:"";
		display: block;
		position:absolute;
		top:10px;
		left:10px;
		z-index: 1;
		width:20px;
		height:20px;
		border-radius:20px;
		background-color: #000;
	}
}

.vue-loading-body{
	position:absolute;
	bottom:0;
	width:100%;
	padding:0 0 12px;
}


